<template>
	<view class="option-container" :style="customStyle">
		<img class="option-icon" :src="logoUrl" />
		<p class="option-name">{{ optionName }}</p>
	</view>
</template>

<script>
	export default {
		name: "Option",
		props: {
			logoUrl: {
				type: String,
				required: true
			},
			optionName: {
				type: String,
				required: true
			},
			customStyle: {
				type: Object,
			},
			optionId: {
				type: String
			}
		},
		data() {
			return {

			};
		}
	}
</script>

<style>
	.option-container {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 100px;
		height: 80px;
		color: #666;
		border: 1px solid #CCC;
		border-radius: 8px;
		/* box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1); */
	}

	.option-icon {
		width: 32px;
		height: 32px;
	}

	.option-name {
		display: inline-block;
		margin-top: 12px;
		font-size: 14px;
		line-height: 16px;
		/* font-weight: 500; */
		font-family: -apple-system;
	}
</style>